<script setup lang="ts">
import { FontList, IconInput } from '../../../components/useIcon';


defineProps<{
    tag: keyof IconInput
}>()

const emit = defineEmits<{
    (event: "select", tag: keyof IconInput): void
}>()
</script>

<template>
    <div
        class="px-4 py-2 hover:bg-white transition-colors duration-300 select-none cursor-pointer"
        v-for="(font) in FontList"
        :key="font.fontFamily"
        :class="{
            'bg-white': tag === font.tag
        }"
        @click="emit('select', font.tag)"
    >{{ font.fontFamily }}</div>
</template>
